<template>
  <div class="orders">
    <div class="page-header">
      <h1>订单管理</h1>
    </div>
    
    <!-- 搜索和筛选 -->
    <el-card class="search-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索订单号或客户名"
            prefix-icon="Search"
            clearable
          />
        </el-col>
        <el-col :span="6">
          <el-select v-model="orderStatus" placeholder="订单状态" clearable>
            <el-option label="待付款" value="pending" />
            <el-option label="待发货" value="processing" />
            <el-option label="已发货" value="shipped" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 订单列表 -->
    <el-card>
      <el-table
        :data="orderList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="customerName" label="客户姓名" width="120" />
        <el-table-column prop="totalAmount" label="订单金额" width="100">
          <template #default="{ row }">
            ¥{{ row.totalAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="下单时间" width="160" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="$router.push(`/orders/${row.id}`)"
            >
              详情
            </el-button>
            <el-button
              v-if="row.status === 'processing'"
              type="success"
              size="small"
              @click="handleShip(row)"
            >
              发货
            </el-button>
            <el-button
              v-if="row.status === 'pending'"
              type="warning"
              size="small"
              @click="handleCancel(row)"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const searchKeyword = ref('')
const orderStatus = ref('')
const dateRange = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const selectedOrders = ref([])

const orderList = ref([
  {
    id: 1,
    orderNo: '20240904001',
    customerName: '张三',
    totalAmount: 2999.00,
    status: 'processing',
    createdAt: '2024-09-04 14:30:00'
  },
  {
    id: 2,
    orderNo: '20240904002',
    customerName: '李四',
    totalAmount: 899.00,
    status: 'shipped',
    createdAt: '2024-09-04 13:15:00'
  },
  {
    id: 3,
    orderNo: '20240904003',
    customerName: '王五',
    totalAmount: 599.00,
    status: 'pending',
    createdAt: '2024-09-04 12:00:00'
  },
  {
    id: 4,
    orderNo: '20240904004',
    customerName: '赵六',
    totalAmount: 1299.00,
    status: 'completed',
    createdAt: '2024-09-03 16:45:00'
  },
  {
    id: 5,
    orderNo: '20240904005',
    customerName: '钱七',
    totalAmount: 399.00,
    status: 'cancelled',
    createdAt: '2024-09-03 10:20:00'
  }
])

const getStatusType = (status) => {
  const types = {
    pending: 'warning',
    processing: 'info',
    shipped: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待付款',
    processing: '待发货',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status] || status
}

const handleSearch = () => {
  console.log('搜索订单:', { keyword: searchKeyword.value, status: orderStatus.value, dateRange: dateRange.value })
}

const resetSearch = () => {
  searchKeyword.value = ''
  orderStatus.value = ''
  dateRange.value = []
}

const handleSelectionChange = (val) => {
  selectedOrders.value = val
}

const handleShip = (row) => {
  ElMessageBox.prompt(
    '请输入物流单号',
    '发货确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /^[A-Za-z0-9]+$/,
      inputErrorMessage: '请输入正确的物流单号'
    }
  ).then(({ value }) => {
    row.status = 'shipped'
    ElMessage.success(`订单 ${row.orderNo} 已发货，物流单号：${value}`)
  })
}

const handleCancel = (row) => {
  ElMessageBox.confirm(
    `确定要取消订单 ${row.orderNo} 吗？`,
    '取消确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    row.status = 'cancelled'
    ElMessage.success('订单已取消')
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
.orders {
  padding: 0;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
}

.search-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
